<template>
	<view class="body">
		<view class="product">
			<image :src="product.productImg" class="product-img"></image>
			<view class="product-info">
				<text class="product-name">{{ product.productName }}</text>
			</view>
			<view class="product-price-num">
				<text class="product-price">￥{{ product.productPrice }}</text>
				<text class="num">x{{ product.orderNum }}</text>
			</view>
		</view>
		<view class="apply-reason" @click="goodstogglePopup('goods')">
			<text class="reason">申请原因：</text>
			<view class="select" v-if="!reason">
				<text>请选择</text>
				<image src="../../static/images/rjt.png"></image>
			</view>
			<view v-else>
				<text class="reason-content">{{ reason }}</text>
			</view>
		</view>
		<view class="apply-num">
			<text>申请数量：</text>
			<view class="select-num">
				<text class="minus" @click="minus(index)">-</text>
				<text class="num">{{ product.returnNum }}</text>
				<text class="add" @click="add(index)">+</text>
			</view>
		</view>
		<view class="uni-list list-pd photo">
			<view class="uni-list-cell cell-pd">
				<view class="uni-uploader">
					<view class="uni-uploader-head">
						<view class="uni-uploader-title">上传图片说明：</view>
						<view class="uni-uploader-info">{{showImgSrc.length}}/{{ maxSize }}</view>
					</view>
					<view class="uni-uploader-body">
						<view class="uni-uploader__files">
							<block v-for="(image,index) in showImgSrc" :key="index">
								<view class="uni-uploader__file img-list">
									<text class="delete" @click="deleteImg(index)">x</text>
									<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
								</view>
							</block>
							<view class="uni-uploader__input-box">
								<view class="uni-uploader__input"  @tap="loadImg"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="refund-instructions">
			<textarea v-model="product.returnExplanation" placeholder="退款说明"></textarea>
		</view>
		<view class="refund-process">
			<text class="refund-title">退款流程</text>
			<text class="refund-item">1.退货为七天无理由退货退款</text>
			<text class="refund-item">2.商家通过申请后请您在商品里面放张纸条，写上昵称，订单编号，退货原因。如果是质量原因。</text>
			<text class="refund-item">3.退货地址：如福建省 宁德市 福安市 秦溪洋工业区 惠丰路13号 游永全 18059360863。</text>
			<text class="refund-item">4.发货时记得备注送上门。（不要发自取件和到付件，到付件仓库拒收）如果不能派送上门的话这边后期收不到您的邮件将导致无法退款。</text>
			<text class="refund-item">5.退款将在检查商品无误后进行退款。</text>
		</view>
		<view class="submit">
			<button @click="submitApply">提交申请</button>
		</view>
		<view class="logo">
			<image src="../../static/images/logo.png"></image>
		</view>
		<!-- 退货原因弹窗 -->
		<view class="goods_return">
			<popupGoods :return-reason="product.returnReason" :show="type === 'goods'" position="bottom" mode="fixed"  @hidePopup="goodstogglePopup('')" @returnReason="returnReason"></popupGoods>
		</view>
	</view>
</template>

<script>
	import popupGoods from '@/components/uni-popupGoods/uni-popupGoods.vue'
	import popupMoney from '@/components/uni-popupMoney/uni-popupMoney.vue'
	import { uploadFile } from '@/common/alioss.js'
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		components: {
			popupGoods,
			popupMoney
		},
		data() {
			return {
				title: 'choose/previewImage',
				imageList: [],
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				type: '',
				product:{
					orderId: null,
					productId: null,
					productImg: '',
					productName: '',
					productPrice: '',
					orderNum: '',  //商品数量
					returnNum: 1,  //退款数量
					returnExplanation: '',  //退款说明
					returnReason: []  //申请原因
				},
				reason: '',
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#f2526f',
				paperworkText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				showPaperwork:true,
				imgSrc:[],
				showImgSrc:[],
				name:"",
				IDNumber:"",
				companyName:"",
				countImg:0,
				maxSize: 9,
				applyAgain: false,
				afterNo: '',
			}
		},
		onLoad(option){
			let self = this;
			console.log(option);
			if(option.orderInfo){
				this.applyAgain = true;
				let order = JSON.parse(option.orderInfo);
				this.afterNo = order.afterNo;
				console.log(order);
				uni.request({
					url: this.$store.state.URL+'order/after_sale/get_after_apply_info',
					method: 'GET',
					data: {
						token: this.$store.state.token,
						after_no: this.afterNo,
					},
					success(res) {
						console.log(res.data);
						if(res.data.status){
							let order = res.data.data.order;
							let goods = order.goods;
							let returnReason;
							if(res.data.data.type == 'returnInstructions'){
								returnReason = res.data.data.reason;
							}
							let item = {
								orderId: order.id,
								productId: goods.goodID,
								productName: goods.goodName,
								productImg: goods.goodImg,
								productPrice: goods.sellingPrice,
								orderNum: goods.num,
								returnReason: returnReason,
								returnExplanation: '',
								returnNum: 1
							}
							self.product = item;
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none',
							})
						}
					},
					fail(e) {
						console.log(e);
					}
				});
			}else{
				uni.request({
					url: this.$store.state.URL+'order/order/show_after',
					method: 'GET',
					data: {
						token: this.$store.state.token,
						id: option.orderId,
						goodID: option.goodId,
					},
					success(res) {
						console.log(res.data);
						if(res.data.status){
							let order = res.data.data.order;
							let goods = order.goods;
							let returnReason;
							if(res.data.data.type == 'returnInstructions'){
								returnReason = res.data.data.reason;
							}
							let item = {
								orderId: order.id,
								productId: goods.goodID,
								productName: goods.goodName,
								productImg: goods.goodImg,
								productPrice: goods.sellingPrice,
								orderNum: goods.num,
								returnReason: returnReason,
								returnExplanation: '',
								returnNum: 1
							}
							self.product = item;
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none',
							})
						}
					},
					fail(e) {
						console.log(e);
					}
				});
			}

		},
		onUnload() {
			this.showImgSrc = [],
			this.sourceTypeIndex = 2,
			this.sourceType = ['拍照', '相册', '拍照或相册'],
			this.sizeTypeIndex = 2,
			this.sizeType = ['压缩', '原图', '压缩或原图'],
			this.countIndex = 8;
		},
		methods: {
	//选择图片
			loadImg(){
				var that=this;
				if(that.countImg < this.maxSize){
					uni.chooseImage({
						count: this.maxSize,
						sourceType: ['album'],
						success: function (res) {
						//数据加载提示框
							uni.showLoading({
								title: '上传图片中',
								mask: true
							});
							that.imgSrc.push(res.tempFilePaths[0]);
							if(that.imgSrc.length!=0){
								uploadFile(that.imgSrc[that.countImg]).then(res => {
									that.showImgSrc.push(res.data.url)
									that.countImg++;
									uni.hideLoading();
								}); 
							}
						},
				    })
				}else{
					uni.showToast({
						title:"最多上传"+this.maxSize+"张图片",
						duration: 2000,
						icon:"none"
					})
				}
			},
			//删除图片
			deleteImg(index){
			    this.showImgSrc.splice(index,1);
			    this.countImg=0;
			},
			//预览图片
			previewImage(e){
				/*var imgUrls=[this.imgSrc[index]]
					uni.previewImage({
			        urls: imgUrls=[this.imgSrc[index]]
			    });*/
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.showImgSrc
				})
			},
			returnReason(reason){
				this.reason = reason;
			},
			test(){
				if(this.product.returnNum > this.product.orderNum){
					this.product.returnNum = this.product.orderNum;
				}else if(this.product.returnNum < 1){
					this.product.returnNum = 1;
				}
			},
			add(index){
				if(this.product.returnNum >= this.product.orderNum){
					return;
				}else{
					this.product.returnNum++;
				}
			},
			minus(index){
				if(this.product.returnNum <= 1){
					return;
				}else{
					this.product.returnNum--;
				}
			},
			goodstogglePopup(type) { //退货原因弹窗
				this.type = type;
			},
			moneytogglePopup(type) { //退款原因弹窗
				this.type = type;
			},
			onBackPress() {
				if (this.type !== '') {
					this.type = '';
					return true;
				}
			},
			sourceTypeChange: function(e) {
				this.sourceTypeIndex = e.target.value
			},
			sizeTypeChange: function(e) {
				this.sizeTypeIndex = e.target.value
			},
			countChange: function(e) {
				this.countIndex = e.target.value;
			},
			chooseImage: async function() {
				if (this.showImgSrc.length === 9) {
					let isContinue = await this.isFullImg();
					if (!isContinue) {
						return;
					}
				}
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: this.showImgSrc.length + this.count[this.countIndex] > 9 ? 9 - this.showImgSrc.length : this.count[this.countIndex],
					success: (res) => {
						this.showImgSrc = this.showImgSrc.concat(res.tempFilePaths);
					}
				})
			},
			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: "已经有9张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.showImgSrc = [];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			// previewImage: function(e) {
			// 	var current = e.target.dataset.src
			// 	uni.previewImage({
			// 		current: current,
			// 		urls: this.imageList
			// 	})
			// },
			// deleteImg(index){
			// 	this.imageList.splice(index,1);
			//},
			submitApply(){
				let self = this;
				if(this.reason == ''){
					uni.showToast({
						title: '请选择退货原因！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}else if(this.showImgSrc.length == 0){
					uni.showToast({
						title: '请上传图片说明！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}else if(this.product.returnExplanation == ''){
					uni.showToast({
						title: '请填写退货说明！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}else{
					console.log(this.product.productId,this.product.orderId,this.product.returnExplanation);
					if(this.applyAgain){
						uni.request({
							url: this.$store.state.URL+"order/after_sale/after_apply",
							data: {
								token: this.$store.state.token,
								reason: this.reason,
								afterReason: this.product.returnExplanation,
								caption: this.showImgSrc.join(','),
								num: this.product.returnNum,
								after_no: this.afterNo,
								type: 'return',
							},
							success(res) {
								console.log(res.data);
								if(res.data.status){
									uni.showToast({
										title: res.data.data,
										duration: 2000
									});
									uni.navigateTo({
										url: '../../../afterSaleStatus/returnProcessing/returnProcessing?afterNo='+self.afterNo
									})
								}else{
									uni.showToast({
										title: res.data.data,
										duration: 2000,
										icon: 'none'
									});
								}
							},
							fail(e){
								console.log(e);
							}
						});
					}else{
						uni.request({
							url: this.$store.state.URL+"order/order/user_after_sale",
							data: {
								token: this.$store.state.token,
								goodID: this.product.productId,
								order_id: this.product.orderId,
								reason: this.reason,
								afterReason: this.product.returnExplanation,
								img_banner: this.showImgSrc.join(','),
								num: this.product.returnNum,
								type: 'return',
							},
							success(res) {
								console.log(res.data);
								if(res.data.status){
									uni.showToast({
										title: res.data.data,
										duration: 2000
									});
									uni.navigateTo({
										url: '../../../afterSaleStatus/returnProcessing/returnProcessing?afterNo='+res.data.afterNo
									})
								}else{
									uni.showToast({
										title: res.data.data,
										duration: 2000,
										icon: 'none'
									});
								}
							},
							fail(e){
								console.log(e);
							}
						});
					}

				}
			}
		}
	}
</script>

<style scoped>
	.body{
		background-color: #F5F5F5;
	}
	.uni-uploader__img{
		max-width: 100%;
	}
	.img-list{
		position: relative;
		border: 1upx solid #F5F5F5;
	}
	.delete{
		position: absolute;
		right: -10upx;
		top: -18upx;
		display: block;
		width: 36upx;
		height: 36upx;
		border: 1upx solid #cccccc;
		background-color: #cccccc;
		border-radius: 50%;
		line-height: 26upx;
		text-align: center;
	}
	.cell-pd {
		padding: 20upx;
	}
	.list-pd {
		margin-top: 20upx;
	}
	.product{
		display: flex;
		width: 750upx;
		height: 210upx;
		box-sizing: border-box;
		padding: 30upx 16upx;
		background-color: #FFFFFF;
	}
	.product-img{
		width: 200upx;
		height: 150upx;
	}
	.product-info{
		width: 368upx;
		height: 150upx;
		box-sizing: border-box;
		padding: 15upx 0 0 20upx;
	}
	.product-info text{
		display: block;
		overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
	}
	.product-name,.product-price{
		font-size: 28upx;
	}
	.product-num{
		margin-top: 40upx;
	}
	.product-num,.num{
		font-size: 24upx;
		color: #a0a0a0;
	}
	.product-price-num{
		width: 150upx;
		height: 150upx;
		box-sizing: border-box;
		padding-top: 15upx;
	}
	.product-price-num text{
		display: block;
		text-align: right;
	}
	.apply-reason{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750upx;
		height: 90upx;
		box-sizing: border-box;
		padding: 0 20upx;
		background-color: #FFFFFF;
		border: 1upx solid #f5f5f5;
	}
	.apply-reason text{
		font-size: 30upx;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.apply-reason .reason{
		display: block;
		width: 200upx;
	}
	.apply-reason .reason-content{
		display: block;
		width: 510upx;
		text-align: right;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.apply-num{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750upx;
		height: 90upx;
		box-sizing: border-box;
		padding: 0 20upx;
		background-color: #FFFFFF;
		border: 1upx solid #f5f5f5;
		font-size: 30upx;
	}
	.select-num{
		width: 180upx;
		height: 40upx;
		font-size: 30upx;
		display: flex;
		justify-content: space-between;
	}
	.select-num text{
		width: 40upx;
		height: 40upx;
		text-align: center;
		box-sizing: border-box;
		border: 1upx solid #F5F5F5;
		line-height: 38upx;
		border-radius: 6upx;
	}	
	.select .minus,.select .add{
		font-size: 30upx;
		color: #8d8d8d;
		background-color: #f5f5f5;
	}
    .select-num .num{
		border: 1upx solid #e94d6a; 
		color: #e94d6a;
	}
	.select{
		display: flex;
		align-items: center;
		color: #a0a0a0;
	}
	.select text{
		display: inline-block;
		padding-right: 20upx;
		font-size: 28upx;
	}
	.select image{
		display: inline-block;
		width: 30upx;
		height: 42upx;
	}
	.photo{
		width: 750upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		font-size: 30upx;
	}
	.photo-list{
		margin-top: 20upx;
	}
	.photo-list image{
		display: inline-block;
		width: 150upx;
		height: 150upx;
	}
	.refund-instructions{
		width: 750upx;
		height: 323upx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 20upx;
		margin-top: 20upx;
	}
	.refund-instructions textarea{
		display: block;
		width: 710upx;
		height: 283upx;
		font-size: 30upx;
	}
	.refund-process{
		width: 750upx;
		box-sizing: border-box;
		padding: 20upx;
	}
	.refund-process text{
		display: block;
		line-height: 1.8;
	}
	.refund-title{
		font-size: 30upx;
		color: #333333;
	}
	.refund-item{
		font-size: 24upx;
		color: #8c8c8c;
	}
	.submit button{
		display: block;
		margin: 0 auto;
		width: 710upx;
		height: 80upx;
		background-color: #e94d6a;
		color: #FFFFFF;
		font-size: 30upx;
		line-height: 80upx;
	}
	.logo{
		width: 750upx;
		height: 55upx;
		margin-top: 125upx;
	}
	.logo image{
		display: block;
		width: 750upx;
		height: 55upx;
	}
	.loadImg{
		background: #fff;
		margin-top:30upx;
		width:100%;
		height: auto;
		padding-top:10upx;
		padding-bottom: 30upx;
	}
	.loadImg text{
		font-size:30upx;
		color:#333333;
		font-weight: 500;
		margin-left:30upx;
		margin-bottom: 24upx;
		display: block;
	}
	.loadImg_button{
		width:150upx;
		height:162upx;
		border:1upx dashed #e0e0e0;
		margin-left:30upx;
		margin-top:60upx;
		margin-bottom: 60upx;
	}
	.loadImg_button view{
		text-align: center;
		margin-top:30%;
	}
	.loadImg_button image{
		width:55upx;
		height:50upx;
	}
	.loadImg_button text{
		font-size: 22upx;
		color: #999999;
		display: block;
		margin-left: -10upx;
	}
	.deleteImg{
		width: 44upx;
		height: 44upx;
		position:absolute;
		top:-22upx;
		right:-22upx;
	}
</style>